<template>
    <div class="cps-view">
        <div :class="$hasEditPermission('/BHView') && macNamebValue ? '' : 'maskDisabled1'">
            <div class="" :class="$hasEditPermission('/BHView') && macNamebValue ? '' : 'maskDisabled2'">
                <div class="content-view">
                    <!-- 行 -->
                    <div class="row">
                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.macNumb
                                }}</span>
                            <el-input v-model="basicStyleData.macNumb" class="ipt orange"
                                @input="basicStyleData.macNumb = $setMaxLength(basicStyleData.macNumb, 25)"></el-input>
                        </div>

                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.macType
                                }}</span>
                            <el-input v-model="basicStyleData.ctgCode" class="ipt yellow" readonly></el-input>
                        </div>
                    </div>

                    <div class="row">
                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.macName
                                }}</span>
                            <el-input v-model="basicStyleData.macName" class="ipt orange"
                                @input="basicStyleData.macName = $setMaxLength(basicStyleData.macName, 65)"></el-input>
                        </div>

                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.law1Lab
                                }}</span>
                            <el-select v-model="basicStyleData.lawCode1" class="ipt" placeholder=" ">
                                <el-option v-for="item in selectList.lawList" :key="item.code" :label="item.cod_name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.from
                                }}</span>
                            <el-input v-model="basicStyleData.macFrom" class="ipt"
                                @input="basicStyleData.macFrom = $setMaxLength(basicStyleData.macFrom, 30)"></el-input>
                        </div>

                        <div class="item">
                            <span class="label">{{ basicStyleDataConst.law2Lab }}
                            </span>
                            <el-select v-model="basicStyleData.lawCode2" class="ipt" placeholder=" ">
                                <el-option v-for="item in selectList.lawList" :key="item.code" :label="item.cod_name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.to
                                }}</span>
                            <el-input v-model="basicStyleData.macTo" class="ipt"
                                @input="basicStyleData.macTo = $setMaxLength(basicStyleData.macTo, 30)"></el-input>
                        </div>

                        <div class="item">
                            <span class="label">{{ basicStyleDataConst.law3Lab }}
                            </span>
                            <el-select v-model="basicStyleData.lawCode3" class="ipt" placeholder=" ">
                                <el-option v-for="item in selectList.lawList" :key="item.code" :label="item.cod_name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.makDate
                                }}</span>
                            <el-date-picker v-model="basicStyleData.makDate" type="month" value-format="yyyy-MM"
                                placeholder=" " class="ipt picker">
                            </el-date-picker>
                        </div>

                        <div class="item">
                            <span class="label">{{ basicStyleDataConst.mkrLab }}
                            </span>
                            <el-select v-model="basicStyleData.mkrCode" class="ipt" placeholder=" ">
                                <el-option v-for="item in selectList.mkrList" :key="item.code" :label="item.cod_name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.oldMacNo
                                }}</span>
                            <el-input v-model="basicStyleData.oldMacNumb" class="ipt"
                                @input="basicStyleData.oldMacNumb = $setMaxLength(basicStyleData.oldMacNumb, 25)"></el-input>
                        </div>

                        <div class="item">
                            <span class="label">{{ basicStyleDataConst.linClsLab }}
                            </span>
                            <el-select v-model="basicStyleData.linClsCode" class="ipt" placeholder=" ">
                                <el-option v-for="item in selectList.lineclsList" :key="item.code"
                                    :label="item.cod_name" :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                    </div>



                    <div class="row">
                        <div class="item">
                            <span class="label">{{ basicStyleDataConst.secLab }}
                            </span>
                            <el-select v-model="basicStyleData.secCode" class="ipt" placeholder=" ">
                                <el-option v-for="item in selectList.secList" :key="item.code" :label="item.cod_name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="item">
                            <span class="label">{{ basicStyleDataConst.useCase }}
                            </span>
                            <div class="message-flex" style="width: 100%">
                                <el-radio-group v-model="basicStyleData.useCase">
                                    <el-radio label="1">{{
                                        $t("message.BSCps.basicCps.label_16")
                                        }}</el-radio>
                                    <el-radio label="2">{{
                                        $t("message.BSCps.basicCps.label_17")
                                        }}</el-radio>
                                    <el-radio label="0">{{
                                        $t("message.BSCps.basicCps.label_18")
                                        }}</el-radio>
                                </el-radio-group>
                            </div>
                        </div>

                        <div class="item">
                            <span class="label">{{ basicStyleDataConst.yearMonth }}
                            </span>
                            <el-date-picker v-model="basicStyleData.useDate" type="month" value-format="yyyy-MM"
                                placeholder=" " class="ipt picker">
                            </el-date-picker>
                        </div>
                    </div>

                    <div class="row">
                        <div class="item">
                            <span class="label">{{ basicStyleDataConst.stLab }}
                            </span>
                            <el-select v-model="basicStyleData.stCode" class="ipt" placeholder=" ">
                                <el-option v-for="item in selectList.stList" :key="item.code" :label="item.cod_name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.weight
                                }}</span>
                            <el-input v-model="basicStyleData.weight" class="ipt picker right"
                                @input="basicStyleData.weight = $setMyNum(basicStyleData.weight, '6 - 3')"></el-input>
                            <span class="label" style="margin-left: 12px">{{
                                basicStyleDataConst.weightUnit
                                }}</span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="item">
                            <span class="label">{{ basicStyleDataConst.fncLab }}
                            </span>
                            <el-select v-model="basicStyleData.fncCode" class="ipt" placeholder=" ">
                                <el-option v-for="item in selectList.fncList" :key="item.code" :label="item.cod_name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.capacity
                                }}</span>
                            <el-input v-model="basicStyleData.capacity" class="ipt picker right"
                                @input="basicStyleData.capacity = $setMyNum(basicStyleData.capacity, '6 - 3')"></el-input>
                            <span class="label" style="margin-left: 12px">{{
                                basicStyleDataConst.capacityUnit
                                }}</span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="item">
                            <span class="label">{{ basicStyleDataConst.outLab }}
                            </span>
                            <el-select v-model="basicStyleData.outCode" class="ipt" placeholder=" ">
                                <el-option v-for="item in selectList.outList" :key="item.code" :label="item.cod_name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.outThck
                                }}</span>
                            <el-input v-model="basicStyleData.outThck" class="ipt picker right"
                                @input="basicStyleData.outThck = $setMaxLength(basicStyleData.outThck, 10)"></el-input>
                            <span class="label" style="margin-left: 12px">{{
                                basicStyleDataConst.outThckUnit
                                }}</span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.crt1Lab
                                }}</span>
                            <el-select v-model="basicStyleData.crtCode1" class="ipt" placeholder=" ">
                                <el-option v-for="item in selectList.crtList" :key="item.code" :label="item.cod_name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>

                        <div class="item">
                            <span class="label">{{ basicStyleDataConst.crt2Lab }}
                            </span>
                            <el-select v-model="basicStyleData.crtCode2" class="ipt" placeholder=" ">
                                <el-option v-for="item in selectList.crtList" :key="item.code" :label="item.cod_name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.radio
                                }}</span>
                            <el-select v-model="basicStyleData.radio" class="ipt picker" placeholder=" ">
                                <el-option v-for="item in selectList.radioList" :key="item.code" :label="item.cod_name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>

                        <div class="item">
                            <span class="label">{{ basicStyleDataConst.fixPro }}
                            </span>
                            <el-input v-model="basicStyleData.fixPro" class="ipt" placeholder=" "
                                @input="basicStyleData.fixPro = $setMaxLength(basicStyleData.fixPro, 30)">
                            </el-input>
                        </div>
                    </div>

                    <div class="row">
                        <div class="item">
                            <span class="label">{{
                                basicStyleDataConst.hetLab
                                }}</span>
                            <el-select v-model="basicStyleData.hetCode" class="ipt picker" placeholder=" ">
                                <el-option v-for="item in selectList.pwthList" :key="item.code" :label="item.cod_name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>

                        <div class="item">
                            <span class="label">{{ basicStyleDataConst.impLab }}
                            </span>
                            <el-select v-model="basicStyleData.impCode" class="ipt picker" placeholder=" ">
                                <el-option v-for="item in selectList.impList" :key="item.code" :label="item.cod_name"
                                    :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="item long">
                            <span class="label">{{
                                basicStyleDataConst.note
                                }}</span>
                            <el-input type="textarea" :rows="4" placeholder=" " v-model="basicStyleData.note"
                                class="textarea" @input="basicStyleData.note = $setMaxLength(basicStyleData.note, 500)">
                            </el-input>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getBasicStyleCombox, getBasicStyle, getBasicStyleLab } from "@/api/api";
import EventBus from "@/eventBus/bus";
import { getLocalStorage } from "../../../utils/storage";
import _ from 'lodash-es';
export default {
    name: "BasicCps",
    props: ['ctgCodeValue'],
    data() {
        return {
            userData: getLocalStorage('userData'),
            value: "",
            options: [],
            optionsValue: "",
            textarea: "",
            radio: "3",
            selectList: {
                crtList: [],
                fncList: [],
                impList: [],
                lawList: [],
                lineclsList: [],
                mkrList: [],
                outList: [],
                pwthList: [],
                radioList: [],
                secList: [],
                stList: [],
            },

            basicStyleDataConst: {

            },

            basicStyleData: {
                macNumb: "", // -1
                macName: "", // -1

                ctgCode: "", // 3
                lawCode1: "", // 8

                macFrom: "", // 12
                macTo: "", // 13

                lawCode2: "", // 9
                lawCode3: "", // 10

                makDate: "", // 14
                mkrCode: "", // 15

                oldMacNumb: "", // 17
                linClsCode: "", // 11

                note: "", // 16

                secCode: "", // 22

                useCase: "", // 24
                useDate: "", // 25

                stCode: "", // 23
                weight: "",

                fncCode: "", // 5
                capacity: "", // 0

                outCode: "", // 18
                outThck: "", // 19

                crtCode1: "", // 1
                crtCode2: "", // 2

                radio: "", // 21
                fixPro: "", // 4

                hetCode: "", // 6
                impCode: "", // 7

                c1CodName: "",
                c2CodName: "",
                cCodName: "",
                fCodName: "",
                hCodName: "",
                iCodName: "",
                kCodName: "",
                l1CodName: "",
                l2CodName: "",
                l3CodName: "",
                lcCodName: "",

                oCodName: "",
                oldMacNumb: "",
                rCodName: "",
                sCodName: "",
                tCodName: "",
            },
            basicStyleDataClone: {}
        };
    },
    components: {},
    watch: {
        ctgCodeValue: {
            deep: true,
            handler: function (newV, oldV) {
                this.basicStyleData.ctgCode = newV;
            },
        },
        macNamebValue: {
            deep: true,
            handler: function (newV, oldV) {
                this.initFn();
            },
        },

        basicStyleData: {
            deep: true,
            handler: function (newV, oldV) {
                this.$emit('DataChangeFn', !_.isEqual(this.basicStyleData, this.basicStyleDataClone))
            },
        },
    },
    computed: {
        macNamebValue() {
            return this.$store.state.macNameb;
        },
    },
    methods: {
        clearData() {
            this.basicStyleDataConst = {};
            this.basicStyleData = {};
            this.selectList = {};
        },
        // 获取下拉表格
        async getBasicStyleComboxApi(inMacName) {
            let res = await getBasicStyleCombox({
                pltCode: this.$store.state.pltCode,
                macType: this.$store.state.macType,
                macNumb: this.$store.state.macNameb,
                MacName: this.$store.state.macName || ''
            })
            if (res.data.code != 0) {
                return;
            }
            for (let key in this.selectList) {
                this.selectList[key] = res.data.data[key];
            }

            if (res.data.data.columnName) {
                try {
                    this.basicStyleDataConst.macNumb.title =
                        res.data.data.columnName[0];
                    this.basicStyleDataConst.macName.title =
                        res.data.data.columnName[1];
                } catch (error) {

                }
            }
        },
        // 获取tab信息
        async getBasicStyleApi(type = 1, val) {
            console.log("fluid --- getFluidTabDataApi");
            // 1.Type(int): 1=正常模式，获取数据。 2=获取初始化数据。 ----这个你先传1,2在后边追加时候使用。
            // 2.CtgCode(int) 种类Code，你暂时传0，追加时候会有一个
            // 3.CtgName(string)种类名称，同上，暂时传空""。
            this.basicStyleData = {};
            let dataJson = {
                type,
                CtgCode: this.$store.state.ctgRowCode == "" ? 0 : this.$store.state.ctgRowCode,
                CtgName: '',
                pltCode: this.$store.state.pltCode,
                macType: this.$store.state.macType,
                macNumb: this.$store.state.macNameb,
                MacName: this.$store.state.macName || ''
            };
            if (val) dataJson.MacName = val;
            let res = await getBasicStyle(dataJson)
            if (res.data.code != 0) {
                return;
            }

            this.basicStyleData = _.cloneDeep(res.data.data.tabData[0]);
            this.basicStyleDataClone = _.cloneDeep(res.data.data.tabData[0]);
            this.$emit('DataChangeFn', false)
        },

        //initFn
        async getLabel() {
            let dataJson = {
                Type: 1,//	是	int	1= 正常模式，2= 点击追加后的初始化模式
                CtgCode: this.$store.state.ctgRowCode == "" ? 0 : this.$store.state.ctgRowCode,//	是	int	种别Code
                CtgName: ' ',//	是	string	种别名称
                PltCode: this.$store.state.pltCode,//	是	int	装置Code
                MacType: this.$store.state.macType,//	是	int	设备类型 1: 機器 / 2: 配管
                MacNumb: this.$store.state.macNameb,//	是	string	机器番号
                MacName: this.$store.state.macName || '',//	是	string	配管号 机器的时候传空即可
            }
            let res = await getBasicStyleLab(dataJson);
            this.basicStyleDataConst = res.data.data
            console.log(res);
        },
        initFn() {
            this.getBasicStyleComboxApi();
            this.getBasicStyleApi();
            this.getLabel();
        }
    },
    created() {
        this.initFn();
    },
    mounted() {
        EventBus.$on("clickRightTable", (val) => {
            this.getBasicStyleApi(1, val);
        });
    },
    beforeDestroy() {
        EventBus.$off("clickRightTable");
    },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.cps-view {
    // position: relative;
    height: 100%;
    width: 100%;
    border: 1px solid #d3d3d3;
    max-height: calc(100% - 41px);
    // overflow: hidden;
    overflow-y: auto;

    .content-view {
        width: 1004px;
        padding: 16px 16px 0 16px;

        .row {
            width: 100%;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .item {
                width: 48%;
                display: flex;
                align-items: center;
                justify-content: flex-start;

                .message-flex {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .message-label {
                        width: 40px;
                    }

                    ::v-deep .el-radio {
                        margin-right: 14px;
                    }
                }

                .label {
                    //     min-width: 96px;
                    min-width: 140px;
                    text-align: left;
                }

                .ipt {
                    //     width: 368px;
                    width: 100%;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 100%;
                        height: 32px;
                    }

                    ::v-deep .el-input__inner:focus {
                        border: 1px solid #dcdfe6;
                    }

                    ::v-deep .el-input__icon {
                        line-height: 32px;
                        color: #909399;
                    }

                    ::v-deep .el-input__suffix {
                        width: 32px;
                        right: 0;
                        background: #dee0e3;
                    }
                }

                .picker {
                    width: 130px;

                    ::v-deep .el-input__inner {
                        width: 130px;
                    }

                    ::v-deep .el-input__suffix {
                        background: transparent;
                    }
                }

                .orange {
                    ::v-deep .el-input__inner {
                        background: #ffdeac;
                    }
                }

                .yellow {
                    ::v-deep .el-input__inner {
                        background: #ffffe1;
                    }
                }

                .textarea {
                    ::v-deep .el-textarea__inner {
                        resize: none;
                    }
                }

                .right {
                    ::v-deep .el-input__inner {
                        text-align: right;
                    }
                }
            }

            .long {
                width: 100%;
            }
        }
    }
}

[v-cloak] {
    display: none;
}
</style>
